<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { reservationDetailApi, inplanDetailApi } from '@/apis/serviceWorkbench.js'

const detailData = ref({})

const getDetailData = async (businessKey) => {
	const res = await reservationDetailApi(businessKey)
	const {
		applicantopinion,
		platenumber,
		planid
	} = res.data
	const result = await inplanDetailApi(businessKey)
	detailData.value = {
		applicantopinion,
		platenumber,
		planid,
		...result.data,
	}
}

onLoad((option) => {
	getDetailData(option.businessKey)
})
</script>

<template>
	<view class="page_container">
		<view class="detail-container">
			<!-- 基本信息卡片 -->
			<view class="detail-card">
				<view class="card-title">基本信息</view>
				<view class="info-group">
					<view class="info-item">
						<text class="info-label">客户名称：{{ detailData.company }}</text>
						<text class="info-value"></text>
					</view>
					<view class="info-item">
						<text class="info-label">计划名称：{{ detailData.planname }}</text>
						<text class="info-value"></text>
					</view>
					<view class="info-item">
						<text class="info-label">预计到达时间：{{ detailData.expectdate }}</text>
						<text class="info-value"></text>
					</view>
					<view class="info-item">
						<text class="info-label">车牌号：{{ detailData.platenumber }}</text>
						<text class="info-value"></text>
					</view>
				</view>
			</view>

			<!-- 备注信息卡片 -->
			<view class="detail-card" v-if="detailData.remark">
				<view class="card-title">备注信息</view>
				<view class="remark-content">{{ detailData.remark }}</view>
			</view>

			<!-- 申请信息卡片 -->
			<view class="detail-card">
				<view class="card-title">申请信息</view>
				<view class="info-group">
					<view class="info-item">
						<text class="info-label">申请人意见：</text>
						<text class="info-value">{{ detailData.applicantopinion || '无' }}</text>
					</view>
				</view>
			</view>

			<!-- 审批信息卡片 -->
			<view class="detail-card">
				<view class="card-title">审批信息</view>
				<view class="info-group">
					<view class="info-item">
						<text class="info-label">审批结果：{{ detailData.status }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">审批意见：</text>
						<text class="info-value">{{ detailData.dealeropinion || detailData.departmentopinion || '无' }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
.detail-card {
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

	.card-title {
		padding: 24rpx 30rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.info-group {
		padding: 20rpx 30rpx;
	}

	.info-item {
		display: flex;
		margin-bottom: 20rpx;
		font-size: $list-font-size;
		line-height: 1.6;

		&:last-child {
			margin-bottom: 0;
		}

		.info-label {
			color: #666;
			min-width: 180rpx;
		}

		.info-value {
			flex: 1;
			color: $list-color;
			font-weight: 500;
			word-break: break-all;
		}
	}

	.remark-content {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		line-height: 1.6;
		color: $list-color;
	}
}
</style>